<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Registro</title>
<%
            response.setHeader("Cache-Control","no-cache");
            response.setHeader("Cache-Control","no-store");
            response.setDateHeader("Expires", 0);              
%>

<link href="estilos/registro2.css" rel="stylesheet"  type="text/css">
<!--extraemos librerias para vaalidacion -->
    <script type="text/javascript" src="Validaciones/jquery.js"></script>
    <script type="text/javascript" src="Validaciones/jquery.validate.js"></script>
    <script type="text/javascript" src="Validaciones/additional-methods.js"></script>
</head>
<body bgcolor="F0F0F0">
<div class="ayuda">
    <a  onClick="history.back()"title="Atras"> <img  src="imgenes/atras.png" width="30px" height="30px"> </a> 
  </div>
	<div id="registro" >
    	<section>
        	<h1> Cambiar Clave</h1>
        </section>
    	<form method="post" action="../Controlador" id="CambioClave">
            <input type="hidden" name="accion" value="cambioClave" />
            <fieldset>
                    <label for="txtClaveActual"> Clave Actual: </label>
                        <input type="password" name="txtClaveActual" required>
                    <label for="txtClave" >Nueva Clave: </label>
                        <input type="password" name="txtClave" id="txtClave">
                    <label for="txtClave2">Confirmar Clave: </label>
                        <input type="password" name="txtClave2" >
                        <br>
                    <input type="reset" id="botonBorrar" name="btnRegistro" value="Cancelar" onclick="history.back()">
                    <input type="submit" id="boton" name="login" value="Actualizar">
            </fieldset>
            <%
                     if(request.getParameter("msg")!= null)
                          out.print(request.getParameter("msg"));
            %>
        </form>

            <style type="text/css" >
                        label.error{
                            color: red;
                            position: relative;  
                         }
                        input:required{
                            background: rgba(243,235,235,0.5); 
                        }
                        input:required:valid{
                            background: #FF8303;
                            color: #fff;    
                        }
                         
                        input:focus:invalid{
                            background-color: #FCE1E2;
                        }
            </style>
                    
        <script>
            $().ready(function(){
                $("#CambioClave").validate({
                    rules:{
                        txtClaveActual:{
                            required: true,
                            },
                        txtClave:{
                            required: true,
                            minlength: 6,
                            maxlength: 16,
                            },
                        txtClave2:{
                            required: true,
                            minlength: 6,
                            maxlength: 16,
                            equalTo: "#txtClave",
                            }
                        }, 
                        messages:{
                            txtClaveActual:{
                                required: "debe ingresar la clave actual",
                            },
                            txtClave:{
                                required:"Digite la nueva contraseña ",
                                minlength: " debe contener {0} digitos minimo",
                                maxlength: " solo se permiten {0} digitos maximo",
                                },
                            txtClave2:{
                                required:"Digite nuevamente su contraseña",
                                minlength: " debe contener {0} digitos minimo",
                                maxlength: " solo se permiten {0} digitos maximo",
                                equalTo: "Digite la misma contraseña",
                                },
                            
                        }
                    
                    });
            });
        </script>

    </div>
</body>
</html>
